<template>
  <div class="treatment-increase">
    <div class="search">
      <el-form :inline="true" label-position="right" :model="formData" ref="validateForm">
        <div class="line">
          <el-form-item label="时间">
            <el-date-picker
              name="pub-time"
              v-model="formData.time"
              type="month"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="险种">
            <el-select
              v-model="formData.insuranceType"
              placeholder="请选择险种"
              clearable
            >
              <el-option
                v-for="item in insuranceTypes"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门特病名称">
            <el-select
              v-model="formData.menteName"
              placeholder="请选择就诊类型"
              clearable
            >
              <el-option
                v-for="item in menteNames"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item></el-form-item>
          <el-form-item class="confirm-reset">
            <el-button class="reset" @click="resetClick">重置</el-button>
            <el-button type="primary" class="confirm" @click="searchClick">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-list">
      <div class="title-content">
        <div class="title">门特病待遇提升分析</div>
        <el-button type="primary" class="export" @click="exportClick">导出</el-button>
      </div>
      <div class="table-content">
        <el-table :data="tableData.list" border style="width: 100%;"
        @sort-change="tableSortChange"
        v-loading="loading"
        max-height="550"
        >
          <el-table-column
            v-for="item of tableData.header"
            :key="item.engColName"
            :prop="item.engColName"
            :label="item.chnColName"
            :sortable="item.sort==1?'custom':false"
            :width="230"
            :align="item.align"
          >
            <template slot="header">
              <div class="tip-content" style="display:inline-block">
                {{item.chnColName}}
                <el-tooltip style="display:inline-block" placement="bottom">
                  <template slot="content">
                    <p style="max-width:300px;">{{item.tip}}</p>
                  </template>
                  <div style="cursor:pointer;">
                    <img :src="item.tip?iconTip:''">
                  </div>
                </el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <span v-if="(scope.row[item.engColName] instanceof Array)">{{ scope.row[item.engColName][0]}}
                <img :src="scope.row[item.engColName][1]=='up'?iconUp:scope.row[item.engColName][1]=='down'?iconDown:''">
                {{scope.row[item.engColName][1]==""?"—":""}}
              </span>
              <span v-else>{{ scope.row[item.engColName] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="查看明细"
            width="100"
            align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="operationRow(scope.row.id)"
                type="text"
                style="width:100%"
                size="small">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.totalDataCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </pagination>
      <!-- <Table :tableData="tableData" :loading="loading" @pageChange="pageChange" :pageIndex="pageIndex" @current="currentIndex"></Table> -->
    </div>
  </div>
</template>

<script>
// import Table from "@/components/medicalAnalysis/Table.vue";
import Pagination from "@/components/Pagination.vue"
// import { 
//   treatmentServDict, 
//   treatmentServList 
//   } from "@/api/index.js"
export default {
  components: {
    Pagination,
    // Table
  },
  data() {
    return {
      formData: {
        time: this.getLastMonth(),
        insuranceType: "1",
        menteName: "1",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      sort: "", //排序字段 按照field1 asc, field2 desc格式展示
      currentPage: 1,
      pageSize: 10, //每页展示条数
      loading: false,
      pageIndex: 0,
      iconUp: require("./img/icon_up.svg"),
      iconDown: require("./img/icon_down.svg"),
      iconTip: require("./img/icon_tip.svg"),
      insuranceTypes: [
        {
          dictCode: "1",
          dictValue: "全部",
        },
        {
          dictCode: "2",
          dictValue: "乙类",
        },
        {
          dictCode: "3",
          dictValue: "丙类",
        },
      ],
      menteNames: [
        {
          dictCode: "1",
          dictValue: "全部",
        },
        {
          dictCode: "2",
          dictValue: "门特病1",
        },
        {
          dictCode: "3",
          dictValue: "门特病2",
        },
      ],
      tableData: {
        header:[
          {chnColName:"门特病名称", engColName:"itemCode", sort:0,align:"left",tip:''},  //sort：0 非排序字段  1 需要排序的字段
          {chnColName:"结算人次(人次)", engColName:"pricCode", sort:1,align:"left",tip:''},
          {chnColName:"结算人数(人)", engColName:"itemName", sort:1,align:"left",tip:''},
          {chnColName:"医疗费用(万元)", engColName:"exctCont", sort:1,align:"right"},
          {chnColName:"享受门特病基金支出(万元)", engColName:"prcunt", sort:1,align:"right",tip:''},
          {chnColName:"不享受门特病基金支出(万元)", engColName:"pricDscr", sort:1,align:"right",tip:"该数据根据选择条件中的门特病相关医疗费用，根据各个身份的普通门诊待遇政策重新测算获得。"},
          {chnColName:"待遇提升（万元）", engColName:"treatment", sort:1,align:"right",tip:''},
        ],
        list:[
          {
            id:1,
            itemCode:"项目编码123", 
            pricCode:"xxxx", 
            itemName:"xxxx", 
            treatment:['down','down'], 
            exctCont:"12344.12", 
            prcunt:"12344.12", 
            pricDscr:"12344.12", 
          },
          {
            id:2,
            itemCode:"bbb", 
            pricCode:"aaaa", 
            itemName:"aaaa", 
            treatment:['up','up'], 
            exctCont:"12344.12", 
            prcunt:"12344.12", 
            pricDscr:"12344.12",  
          },
          {
            id:3,
            itemCode:"bbb", 
            pricCode:"aaaa", 
            itemName:"aaaa", 
            treatment:['',''], 
            exctCont:"12344.12", 
            prcunt:"12344.12", 
            pricDscr:"12344.12", 
          }
        ],
        totalDataCount: 71,
      },
    };
  },
  mounted() {
    this.searchClick();
  },
  methods: {
    //获取上个月，例如2021-09
    getLastMonth() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth();
      if(month == 0) {
        return year -1 + "-" + 12;
      } else if(month.toString().length == 1) {
        return year + "-0" + month;
      } else {
        return year +"-" + month;
      }
    },
    // 排序
    tableSortChange(val) {
      this.sort = val.order == "ascending"?val.prop+" " +"asc":val.order == "descending"?val.prop+" " +"desc":"";
      this.searchList();
    },
    // 重置
    resetClick() {
      this.formData= {
        time: this.getLastMonth(),
        insuranceType: "1",
        menteName: "1",
      },
      this.sort = "";
    },
    searchClick() {
      this.currentPage = 1;
      this.searchData = JSON.parse(JSON.stringify(this.formData))
      this.searchList();
    },
    searchList() {
      this.loading = true; //加载中。。。
      const params = {
        ...this.searchData,
        pagenum: this.currentPage,
        pagecount: this.pageSize,
        sort: this.sort
      }
      console.log("111111",params);
      this.loading = false;
      // treatmentServList(params).then(res=>{
      //   // console.log("ssssssssssssssss",res);
      //   this.tableData = res.data;
      //   this.loading = false;
      // }).catch(err=>{
      //   console.log(err);
      // })
    },
    showUpDown(val) {
      console.log("aaaaaaaaaaaaaaaaaaaaaaa",val);
    },
    // 页码-每页**条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchList();
    },
    // 页码-当前**页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchList();
    },
    pageChange(val) {
      console.log("pageChange===",val);
      this.sort = val.sort;
      this.currentPage = val.currentPage;
      this.pageSize = val.pageSize;
      this.searchList()
    },
    currentIndex(index) {
      console.log("iiiii",index+1);
      this.$emit('current', index+1);
    },
    operationRow(rowId) {
      console.log("rrrrrrrrrr",rowId);
      this.$emit("current",2)
      this.$store.commit("operationPage",2)
    },
    exportClick() {
      console.log("导出。。。。。");
    }
  },
};
</script>
<style>
  .el-tooltip__popper {
    background: #fff !important;
    color: #303133 !important;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 1px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #fff!important;
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #fff !important;
  }
</style>
<style lang="less" scoped>
@import url("@/assets/common/global_deep_style.less");
@import url("./index.less");

</style>